---
title: Media Queries
---

import Seo from '../../../components/Seo.astro'
import Badge from '../../../components/Badge.astro'

<Seo
    seo={{
        title: 'Media queries',
        description: 'How to use media queries with react-native-unistyles'
    }}
>

<Badge label="All platforms" />
<Badge label="2.0.0" />

Media queries provide more power and allow you to style cross-platform apps with pixel-perfect accuracy.

### Basic usage

To use media queries, you need to import the `mq` utility and convert your value to an `object`:

```diff lang="tsx" /mq/ del="backgroundColor: theme.colors.background,"  ins="backgroundColor: {"
import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
+            [mq.only.width(240, 380)]: theme.colors.background,
+            [mq.only.width(380)]: theme.colors.barbie
+       }
    }
}))
```

The `mq` utility provides Intellisense for quickly building your media queries.

### Advanced usage

You can also combine `width` media queries with `height` media queries:

```tsx /mq/
import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.width(240, 380).and.height(300)]: theme.colors.background,
            [mq.width(380).and.height(300)]: theme.colors.barbie
        }
    }
}))
```

Or use only `height` media queries:

```tsx /mq/
import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.only.height(300, 500)]: theme.colors.background,
            [mq.only.height(500)]: theme.colors.barbie
        }
    }
}))
```

You can also reuse your defined [breakpoints](/reference/breakpoints/):

```tsx /xl/
import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.only.height(500)]: theme.colors.background,
            [mq.only.width(200, 'xl')]: theme.colors.barbie
        }
    }
}))
```

### Reference

```shell title="Available combinations"
mq.only.width // target only width
mq.only.height // target only height
mq.width(...).and.height(...) // target both width and height
mq.height(...).and.width(...) // target both height and width
```

```shell title="Available values"
(100, 200) // from 100 to 199
(400, 'xl') // from 400 to 'xl' breakpoint
('sm', 'md') // from 'sm' to 'md' breakpoint
(undefined, 1000) // from 0 to 999
(null, 800) // from 0 to 799
(500) // from 500 onwards
```

```shell title="Full example"
mq.only.width(100, 200) // width from 100 to 199
mq.height(500).and.width('sm') // heigh from 500 onwards and width from 'sm' breakpoint onwards
mq.only.height(null, 1000) // height from 0 to 999
```

:::tip
If you pass an invalid range to mq utility eg. ('xl', 'sm') or (500, 200) the media query will be marked as invalid and won't be used to resolve your styles.
:::

### Combining media queries with breakpoints

You can mix media queries with breakpoints, but media queries will always have higher priority:

```tsx
import { createStyleSheet, mq} from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: {
            sm: theme.colors.background,
            // Unistyles will firsly resolve to this style, even though sm may be also correct
            [mq.only.width(200, 'xl')]: theme.colors.barbie
        }
    }
}))
```

### CSS Media Queries

CSS Media Queries support is only available on the web.
To use CSS Media Queries set `experimentalCSSMediaQueries` with `UnistylesRegistry`:

```tsx /experimentalCSSMediaQueries/
import { UnistylesRegistry } from 'react-native-unistyles'

UnistylesRegistry
    .addConfig({
        experimentalCSSMediaQueries: true
    })
```

:::tip
CSS Media queries is an experimental feature and doesn't support all properties yet.
It will be moved to stable in Unistyles 3.0.
:::

With `experimentalCSSMediaQueries` set to `false`, Unsityles will compute your styles in the JavaScript.

</Seo>
